import type { Props, SearchOption } from './interface'
import { useEffect, useState } from 'react'
import { Popover, SearchBar } from 'antd-mobile'
import { SearchOutline, UpOutline } from 'antd-mobile-icons'
import styles from './index.module.less'

export const Searcher = <O extends SearchOption>(props: Props<O>) => {
    /** 是否有参数选项 */
    const hasOption = props.options.length > 0

    /** 默认激活的参数项 */
    const [activeOption, setActiveOption] = useState<SearchOption | undefined>(
        hasOption ? props.options[0] : { label: '-', param: props.defaultParam ?? '_' },
    )

    const [showValue, setShowValue] = useState('')

    const [popoverVisible, setPopoverVisible] = useState<boolean>(false)

    /** 同步传入的showValue */
    useEffect(() => {
        setShowValue(props.value)
    }, [props.value])

    return (
        <div className={styles.searchView}>
            {hasOption && (
                <>
                    <Popover
                        content={
                            <>
                                {props.options.map(item => {
                                    return (
                                        <div
                                            key={item.param}
                                            style={{ padding: '12px 32px' }}
                                            onClick={() => {
                                                setActiveOption(item)
                                                setPopoverVisible(false)

                                                if (item.param !== activeOption?.param) {
                                                    props.onParamChange?.(item.param)
                                                    setShowValue('')
                                                }
                                            }}
                                        >
                                            {item.label}
                                        </div>
                                    )
                                })}
                            </>
                        }
                        trigger="click"
                        visible={props.options?.length > 1 && popoverVisible}
                        placement="bottom-start"
                        onVisibleChange={setPopoverVisible}
                    >
                        <div
                            className={styles.popoverView}
                            onClick={() => {
                                setPopoverVisible(true)
                            }}
                        >
                            <span className={styles.drownTitle}>{activeOption?.label}</span>

                            {/* 参数选项大于1个时显示下拉箭头 */}
                            {props.options.length > 1 && (
                                <UpOutline
                                    className={popoverVisible ? styles.upIcon : styles.downIcon}
                                    fontSize={12}
                                    color="#333"
                                />
                            )}
                            <div className={styles.line} />
                        </div>
                    </Popover>

                    <div className={styles.line} />
                </>
            )}

            <SearchBar
                value={showValue}
                placeholder={props.placeholder ?? '请输入要搜索的内容'}
                clearable={false}
                style={{ '--height': '33px' }}
                className={styles.searchBarView}
                icon={<SearchOutline className={styles.searchIcon} />}
                showCancelButton
                onSearch={value => {
                    props.onParamValueChange && props.onParamValueChange(activeOption?.param, value)
                }}
                onChange={v => {
                    setShowValue(v)
                    props.onChange?.(v)
                }}
                onFocus={() => {
                    props.onInputFocus && props.onInputFocus(activeOption?.param)
                }}
                onBlur={() => {
                    props.onInputBlur && props.onInputBlur()
                }}
            />
        </div>
    )
}

export default Searcher
